%
%       This document is free documentation; you can redistribute it and/or modify
%       it under the terms of the GNU Free Documentation License as published by
%       the Free Software Foundation; either version 1.2 of the License, or
%       any later version.
%       
%       This doc is distributed in the hope that it will be useful,
%       but WITHOUT ANY WARRANTY; without even the implied warranty of
%       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
%       GNU Free Documentation License for more details.
%       
%       You should have received a copy of the GNU Free Documentation
%       License along with this document ; if not, write to the Free
%       Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
%       Boston, MA 02110-1301, USA.
% 
\section{Creating a Navigation Framework}
\label{sec:CreatingANavigationFramework}
\subsection{Multiple ways to navigate}
\label{sec:MultipleWaysToNavigate}
En la página principal se pueden encontrar los siguientes elementos,
con los cuales uno puede recorrer el sitio:
\begin{itemize}

\item Un cuadro de búsqueda, en la parte superior.  El cual permite
  que el usuario pueda buscar productos o servicios utilizando un
  motor de busqueda.

\item Los desarrolladores del sitio han organizado los productos por
  categorías (ver \ref{sec:CategoryPages}) y desde el homepage es
  posible acceder a una lista completa de vinculos a las mismas desde
  el link \emph{``Navegar''}; también se muestran varios links a un
  conjunto reducido de categorías que está ubicado al costado
  izquierdo de la página principal.

\item En la parte inferior de esta lista, por debajo del límite del
  pliegue (fold), hay links a secciones como:

  \begin{itemize}
  \item \emph{``Opiniones y catálogo''}: siguiendo este link se pueden
    ver los productos de acuerdo a su valuación.
  \item \emph{``Guías de compra''}: es una colección de guías
    orientadas a los usuarios principiantes; éstas estan pensadas para
    ayudar a los usuarios más nuevos a elegir bien qué comprar en el
    sitio.
  \item \emph{``Tendencias''}: vista de los productos según su
    popularidad.
  \item \emph{``eShops''}: eShops es una forma de promocionar
    orientada a los vendedores, les permite crear una página para
    agrupar sus productos, es más personalizable.
  \end{itemize}
  
\item Una barra de links (a manera de menús, pero no desplegables),
  donde se pueden encontrar los siguientes links:
  \begin{itemize}
  \item \emph{``Navegar''}: Se ubica sobre el cuadro de búsqueda. En
    la página destino hay un listado de categorías/subcategorías (que
    ocupan todo el ancho de la página, excepto un margen), y links a
    eShops, imperdibles (apunta directamente a subastas más ofertadas)
    y promociones.
  \item \emph{``Buscar''}: Está sobre el cuadro de búsqueda, que lleva
    a una búsqueda avanzada (donde se puede restringir, por ejemplo,
    por categoría o precio, o buscar usuarios), y un link a
    MercadoAlerta.
  \item \emph{``Mapa del sitio''}: Ver \ref{sec:sitemap}.
  \item \emph{``Mi MercadoLibre''}: Acceso a la cuenta de usuario, en
    ella el usuario puede configurar todos los aspectos de su cuenta,
    como sus datos personales, etc., visualizar el estado de los
    productos que ofrece o quiere comprar, las preguntas enviadas o
    por contestar o visualizar el estado de su cuenta de MercadoPago.
  \item \emph{``MercadoPago''}: Acceso a un servicio similar a una
    cuenta corriente que permite los pagos y cobros entre usuarios de
    MercadoLibre.com.
  \item \emph{``Promociones''}: Siguiendo el mismo se accede a una
    página que lista productos en promoción.
  \item \emph{``Comunidad''}: Permite dirigir al usuario a los foros
    de vendedores o compradores, opiniones y guías.
  \item \emph{``Ayuda''}: Envía al visitante a la sección de ayuda.
  \end{itemize}

\item Una sección llamada \emph{``Imperdibles''}, con links a los
  productos y servicios más ofertados, lo cual es una forma
  alternativa de clasificación aparte de las categorías.

\item Una sección, publicitando con imágenes \emph{``Productos
    Especiales''} que hay a la venta. Para que un producto aparezca en
  esta zona, el vendedor debe pagar una cifra a MercadoLibre.com a la
  hora de publicar el mismo. Es una idea similar a los enlaces
  patrocinados de Google.

\item Una pequeña (pero mal ubicada, ya que la zona superior central
  de la pagina suele acaparar mucho la atención al usuario y puede
  hacer perder de foco al visitante) sección de publicidad, donde a
  veces insta al usuario a renovarse (cambiar de consola de juegos,
  celular, cambiar notebook por netbook,
  etc.).  %(también publicita detalles del
  % servicio).

\item Una sección donde se muestran seis artículos destacados (en el
  límite del pliegue: al estar ordenados en una grilla de tres
  columnas por dos filas, dependiendo del navegador, de la resolución
  en la que se encuentre (y si tiene varias barras instaladas), el
  usuario verá sin hacer scroll 0, 3 o 6).

\item Una sección de promociones (también al límite del pliegue),
  donde aparte de promociones propiamente dichas, se suele mostrar
  también algún artículo basado en los anteriores que uno haya visto.

\item Debajo del pliegue se muestra un artículo comentado.

\end{itemize}

En la figura \ref{fig:homepage} hay una captura de la homepage, donde se
aprecia lo comentado.

\simpleplaceimage{width=\textwidth}{h}{imgs/homepage}{Homepage de
  mercadolibre.com}{fig:homepage}
% citar
\subsection{Browsable content}

Los productos en venta están divididos en distintas categorías
(accesibles en la página principal) y subcategorías (tanto desde
\emph{``Ver todas las categorías''}, al final de la lista de
categorías, como en \emph{``Navegar''}). En la parte de
\emph{``Imperdibles''} hay otras formas de organización de los
productos.  Cada vez que se accede a un listado de productos que
corresponden a cierta categorización, en la parte superior de dicha
lista se encuentra un rastro de migas que indica al usuario donde se
encuentra. A su vez, dichos listados permiten un mayor filtrado, como
ser tipo de producto, lugar de la venta, condiciones de la subasta,
etc.. Los filtros que se agregan aparecen con rectangulos, con una
pequeña cruz a manera de cierre de ventana para quitarlos. El listado
se muestra de a 50 productos, por lo que si las subastas incluidas en
la categorización superan dicho número, al final del listado visible
se encontrará un renglón con números de página, como suelen tener los
buscadores.
% , donde el número que no sea un vínculo será la página actual (o
% sea, el de color negro sin subrayar, al contrario del resto de color
% azul subrayado).

\subsection{Hierarchical organization}
\label{sec:HierarchicalOrganization}
Como ya se mencionó anteriormente, las subastas y productos se dividen
en categorías que las distinguen de acuerdo a sus tipos y
usos. Separadas del resto aparecen categorías como \emph{``Autos,
  Motos y Otros''} (que permite un filtrado por marcas elegibles de
una lista, modelos de acuerdo a la marca, y años),
\emph{``Inmuebles''} (donde los filtros posibles son compra, alquiler
o alquiler de temporada, tipo de inmueble, ubicación y rango de
precio) y \emph{``Servicios, y Encuentros''} (relaciones personales --
en este caso usa un servicio externo, Meetic).  En los productos
principales, dentro de cada categoría se pueden encontrar
subcategorías de primer nivel (por ejemplo, en la categoría
\emph{``Hogar, Muebles y Jardín''} podemos encontrar subcategorías
correspondientes a los distintos cuartos de una casa, iluminación,
jardines, etc.), de segundo nivel (productos correspondientes a cada
cuarto, por ejemplo almohadas, camas, cómodas, etc. para un
dormitorio) e incluso de tercer nivel (camas de una o dos plazas,
respaldos, etc.).  Tanto las categorías como las subcategorías son
descriptivas y simples de comprender, solo unas pocas pero relevantes
palabras por categoría o subcategoría. Todas las categorías cuentan
con menos de 50 subcategorías cada una (separando los distintos
niveles).  En la página principal, las categorías no cuentan con
ejemplos, sin embargo son claramente identificables. Incluso las
subcategorías pueden actuar como ejemplos.

% grafico con la Jerarquia ?
\subsection{Task-based organization}

Cuando uno se encuentra frente a un producto para comprar, tiene el
nombre del vendedor y sus calificaciones como vínculos para poder
obtener más información, a mano un link para hacerle una pregunta al
vendedor (ante cualquier duda que pudiera surgir), y otro para ver
opiniones sobre el producto (si es que las tiene). También cuenta con
un link para denunciar la publicación. De estas opciones, las de
obtener información sobre el vendedor y sobre el producto pueden
influir en la compra pero no forman parte de la misma. La pregunta al
vendedor y la denuncia llegan a un fin, pero ante la primera la compra
se aplaza (hasta obtener una respuesta), y ante la segunda no hay
compra.  Hay otras dos opciones que brinda MercadoLibre, pero resulta
más difícil encontrarlas, ya que se encuentran poco antes del final de
la página. Dichas opciones son enviar a un amigo (que cede la decisión
de la compra a dicho amigo, por lo que el usuario se desvincula de la
misma) y seguir esta publicación (que aplaza la compra).

\subsection{Alphabetical organization}

No se aplica en este sitio.

\subsection{Chronological organization}

No se aplica en este sitio.

\subsection{Popularity-based organization}
A simple vista, en el sitio principal se aprecian vínculos a artículos
más vendidos y subastas más ofertadas, con un pequeño símbolo de fuego
para reforzar la idea de que la competencia por los mismos puede ser
feroz. Al final de la página, entre otros vínculos, hay uno que apunta
a Tendencias, una página donde muestra las palabras más usadas en
búsquedas, dos de los artículos más vendidos, dos de los más
visitados, las guías más populares, y un listado de categorías para
filtrar dichas tendencias.
\subsection{Category pages}
\label{sec:CategoryPages}

Las páginas de las categorías mantienen el amarillo de fondo en
ciertas secciones como tiene el resto del sitio. Además, entre ellas,
hay en común:
\begin{itemize}
\item Una grilla con seis artículos especiales (artículos cuyos
  vendedores pagan un extra), y un link para verlos a todos en esa
  misma categoría.
\item \emph{``Imperdibles''}: Más ofertados, más visitados,
  \emph{``Empiezan a \$1''}, y otros.
\item Algunas guías. \footnote{Ver en
    \url{http://www.mercadolibre.com.ar/argentina/ml/org_ayuda.main?as_categ_id=GUIAV}}
\item Cuatro productos fuera de esa categoría.
\item Busquedas preferidas y palabras más buscadas.
\item Barra de búsqueda y links en la parte superior (que casi no
  varía entre los distintos lugares del sitio), y un pie de página
  parecido a otros del resto del sitio.
\end{itemize}
A partir de las subcategorías ya se entra en los listados propiamente
dichos. Las subcategorías de niveles siguientes aparecen como
filtros. Cabe decir que todos los listados tienen la misma base:
publicidad (otros sitios) en la parte superior, sigue una barra de
búsqueda con algunos links de otras opciones, un rastro de migas con
la categoría y la subcategoría, más opciones de filtro según la
categoría, opción de elegir listado (vertical) o galería de fotos
(grilla), orden por relevancia o precio, y al final una lista de
páginas de resultados (como los buscadores), una sugerencia de usar
una guía, y un pie de página parecido a otros del resto del sitio.

\subsection{Site accessibility}\label{sec:SiteAccessibility}

Para navegar por teclado: En ninguna de las páginas hay accesos
directos con combinaciones de teclas (por ejemplo, Alt+Shift+F).
En la página principal:
\begin{itemize}
\item Lo primero que obtiene foco con Tab es el recuadro de búsqueda.
\item El orden de acceso a los enlaces de la parte superior de la
  página no se corresponde con el orden visual.
\item La indicación de enlace seleccionado en la barra que sigue a los
  enlaces de arriba no se alcanza a ver lo suficiente en Firefox,
  mientras que en Internet Explorer se nota un poco más.
\item Hay dos imágenes enlace de un pixel cuadrado, que llevan a la
  misma página. Pueden causar confusión porque no tienen texto
  alternativo, y el enlace al que apuntan no es la página principal
  sino que termina en una redirección a la misma.  Las personas con
  discapacidades motrices pueden tener dificultades para escribir
  correctamente palabras para buscar. La búsqueda tiene corrección
  ortográfica, pero no remarca las palabras mal escritas, como tampoco
  las que deberían ser en lo encontrado. Cuenta también con stemming
  (trato de palabras por su raíz), en cuyo caso sí remarca las
  palabras encontradas.  En el listado de productos:
\item Ciertas publicidades propias del sitio, que aparecen encima,
  tienen links. El navegador, con la tecla Tab, va primero a esos
  links.
\item Los links sobre la barra de búsqueda tampoco siguen el orden
  visual.
\item Cuando hay más de cuatro subcategorías, en el listado de las
  mismas aparece al final un link, ``Más opciones'', que abre un
  recuadro. Los links de esas categorías se ubican antes de la
  primera en la página en sí, por lo que para llegar hasta ellas con
  la tecla Tab hay que agregar la tecla Mayúsculas (Shift) para
  invertir el orden de los saltos. Tal necesidad no se visualiza en
  ningún lado (uno piensa que luego del link Otras categorías, se
  saltará a esa ventana), por lo que se puede pensar que no hay forma
  de llegar con Tab (al seguir los saltos por los otros filtros, y
  luego por el listado en sí, hasta llegar al pie de página y volver
  al principio).

  En Firefox no se nota cuando está seleccionado el botón de
  cerrar de ese recuadro (aparece una marquita al lado del título, lejos del
  botón). En Google Chrome no aparece ninguna marca. Pero en Internet
  Explorer si se ve la marca punteada alrededor del botón. Luego, en
  la página del producto a comprar, sigue el problema del orden de los
  vínculos sobre la búsqueda. Aparte de esos vínculos, están los de un
  rastro de migas de la categoría y subcategorías a las que pertenece
  el producto (sin necesidad de haber pasado previamente por tales
  subcategorías) y de las fotos del producto (la que se muestra en el
  momento, para agrandarla, y las demás que aparecen abajo), antes de
  que el usuario pueda llegar al botón Comprar con el teclado.
\end{itemize}

%%% Local Variables: 
%%% mode: latex
%%% TeX-master: "../informe"
%%% End: 
